define('common:widget/ui/ai/header/index', function(require, exports, module) {

  /**
   * @file AI工具Header
   * @author yuyanyan01
   */
  
  var san = require('common:widget/ui/ai/san');
  var $ = require('common:widget/ui/base/base');
  var Dialog = require('common:widget/ui/ai/dialog/dialog');
  var surveyController = require('common:widget/ui/ai/survey/controller');
  var PAGE = require('common:widget/ui/ai/survey/constant');
  
  var lib = require('common:widget/ui/utils/lib');
  var constants = require('common:widget/ui/utils/constants');
  var buttonType = constants.buttonType;
  var iconMap = constants.iconMap;
  var isMac = lib.isMac();
  
  var dialogMap = {
      [buttonType.RESET]: {
          title: '您确定要重置吗？',
          desc: '重置将会清空当前图片的操作记录'
      },
      [buttonType.EXIT]: {
          title: '您确定要放弃吗？',
          desc: '是否放弃当前图片的操作'
      }
  };
  
  return san.defineComponent({
      /* eslint-disable  max-len */
      template: ''
          +   '<div>'
          +       '<div class="ai-edit-header">'
          +           '<div class="left">'
          +               '<div class="ai-logo-wrap">'
          +                   '<img class="ai-logo" alt="AI"'
          +                       'src="https://gips2.baidu.com/it/u=2672467662,486291363&fm=3028&app=3028&f=PNG&fmt=auto&q=100&size=f60_60">'
          +               '</div>'
          +               '<div class="title">百度AI图片助手</div>'
          +           '</div>'
          +           '<div class="right">'
          +               '<div class="reset {{currentStatus === \'loading\' ? \'btn-disabled\' : \'\'}}"'
          +                   'on-click="handleClick($event, buttonType.RESET)">'
          +                   '<div class="reset-icon"></div>'
          +                   '<span class="reset-btn">重置</span>'
          +               '</div>'
          +               '<div class="undo-redo {{currentStatus === \'loading\' ? \'btn-disabled\' : \'\'}}"'
          +                   'on-click="handleUndoRedo(buttonType.UNDO)">'
          +                   '<div class="undo-redo-icon"'
          +                       'style="background: url({{undoEnabled ? iconMap.undo : iconMap.undoDisable}}) center / contain no-repeat;">'
          +                   '</div>'
          +               '</div>'
          +               '<div class="divider"></div>'
          +               '<div class="undo-redo undo-redo-right {{currentStatus === \'loading\' ? \'btn-disabled\' : \'\'}}"'
          +                   'on-click="handleUndoRedo(buttonType.REDO)">'
          +                   '<div class="undo-redo-icon"'
          +                       'style="background: url({{redoEnabled ? iconMap.redo : iconMap.redoDisable}}) center / contain no-repeat;">'
          +                   '</div>'
          +               '</div>'
          +               '<div class="exit"'
          +                   'on-click="handleClick($event, buttonType.EXIT)">'
          +                   '<div class="exit-icon-view">'
          +                       '<div class="exit-icon-container">'
          +                           '<img class="exit-icon" src="https://psstatic.cdn.bcebos.com/basics/image_fe/exit_white_1705575198000.png"/>'
          +                           '<img class="exit-icon" src="https://psstatic.cdn.bcebos.com/basics/image_fe/exit_active_1705575189000.png"/>'
          +                       '</div>'
          +                   '</div>'
          +                   '退出编辑'
          +               '</div>'
          +           '</div>'
          +       '</div>'
          +       '<m-dialog '
          +           's-if="showDialog"'
          +           'title="{{dialogTitle}}"'
          +           'desc="{{dialogDesc}}"'
          +           'on-close="handleClose"'
          +           'on-cancel="handleCancel"'
          +           'on-confirm="handleConfirm"'
          +       '/>'
          +   '</div>',
      /* eslint-enable  max-len */
      components: {
          'm-dialog': Dialog
      },
      initData: function () {
          return {
              originImg: {},
              query: '',
              selectType: '-1',
              currentStatus: '',
              buttonType,
              showDialog: false,
              dialogTitle: '',
              dialogDesc: '',
              dialogType: '',
              isExit: false,
              undoEnabled: false,
              redoEnabled: false,
              iconMap
          };
      },
  
      attached: function () {
          this.handleKeyDownBind = this.handleKeyDown.bind(this);
          document.addEventListener('keydown', this.handleKeyDownBind);
      },
  
      /**
       * 处理撤销重做按钮点击事件
       */
      handleUndoRedo: function (type) {
          var undoEnabled = this.data.get('undoEnabled');
          var redoEnabled = this.data.get('redoEnabled');
          var selectType = this.data.get('selectType');
          var currentStatus = this.data.get('currentStatus');
          if (this.data.get('currentStatus') === 'loading') {
              return;
          }
          this.fire('undo-redo-click', {type});
      },
  
      /**
       * 处理键盘事件，window监听ctrl+z和ctrl+y，mac监听command+z和command+shift+z
       */
      handleKeyDown(event) {
          var key = event.key.toUpperCase();
          // 系统不同，键盘快捷键不同，mac监听command，win监听ctrl，当按下ctrl+z时，触发undo操作
          // 其中event.metaKey为mac下的command键，event.ctrlKey为win下的ctrl键，event.shiftKey为shift键
          if (((isMac && event.metaKey || !isMac && event.ctrlKey) && key === 'Z' && !event.shiftKey)) {
              this.handleUndoRedo(buttonType.UNDO);
          }
          else if ((isMac && event.metaKey && key === 'Z' && event.shiftKey)
              || (!isMac && event.ctrlKey && key === 'Y')) {
              this.handleUndoRedo(buttonType.REDO);
          }
      },
  
      /**
       * 处理撤销重做按钮状态
       */
      handleUndoRedoStatus: function (params) {
          var undoEnabled = params.undoEnabled;
          var redoEnabled = params.redoEnabled;
          this.data.set('undoEnabled', undoEnabled);
          this.data.set('redoEnabled', redoEnabled);
      },
      detached() {
          document.removeEventListener('keydown', this.handleKeyDownBind);
      },
      sendLog: function (type, value, extra) {
          var originImg = this.data.get('originImg');
          var query = this.data.get('query');
          var ext = $.extend({}, {
              image: originImg.src,
              query
          }, extra);
          this.dispatch('send-log', {
              type,
              value,
              ext
          });
      },
  
      handleClick: function (e, type) {
          var currentStatus = this.data.get('currentStatus');
          var selectType = this.data.get('selectType');
          if (currentStatus === 'loading' && type === 'reset') {
              return;
          }
          if (surveyController.displayParams.page === PAGE.EDIT) {
              surveyController.close();
          }
          this.data.set('showDialog', true);
          this.data.set('dialogType', type);
          this.data.set('dialogTitle', dialogMap[type].title);
          this.data.set('dialogDesc', dialogMap[type].desc);
  
          this.sendLog('click', type, {
              function: selectType,
              edit_status: currentStatus
          });
      },
      handleClose: function () {
          this.data.set('showDialog', false);
          var type = this.data.get('dialogType');
          var currentStatus = this.data.get('currentStatus');
          var selectType = this.data.get('selectType');
  
          this.sendLog('click', type, {
              function: selectType,
              edit_status: currentStatus,
              retent_pos: 'close'
          });
      },
      handleCancel: function () {
          this.data.set('showDialog', false);
          var type = this.data.get('dialogType');
          var currentStatus = this.data.get('currentStatus');
          var selectType = this.data.get('selectType');
  
          this.sendLog('click', type, {
              function: selectType,
              edit_status: currentStatus,
              retent_pos: 'cancel'
          });
      },
      handleConfirm: function () {
          var dialogType = this.data.get('dialogType');
          var currentStatus = this.data.get('currentStatus');
          var selectType = this.data.get('selectType');
          if (dialogType === buttonType.RESET) {
              this.fire('reset');
              this.data.set('showDialog', false);
          }
          if (dialogType === buttonType.EXIT) {
              this.fire('exit');
          }
  
          this.sendLog('click', dialogType, {
              function: selectType,
              edit_status: currentStatus,
              retent_pos: 'confirm'
          });
      }
  });
  

});
